import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:untitled/pages/bean/bean_video.dart';
import 'package:video_player/video_player.dart';
import 'package:cached_network_image/cached_network_image.dart';

 // 播放视频页面
class FindVideoItemPage extends StatefulWidget {
  String value;
  VideoModel videoModel;
  FindVideoItemPage(this.value, this.videoModel);

  @override
  State<StatefulWidget> createState() {
    return FindVideoItemPageState();
  }
}

class FindVideoItemPageState extends State<FindVideoItemPage> {
  // 创建视频播放控制器
  VideoPlayerController? videoPlayerController;

  // 控制更新视频初始化完成状态更新
  Future? videoPlayFuture;
  @override
  void initState() {
  
    super.initState();
    videoPlayerController = VideoPlayerController.network(widget.videoModel.videoUrl);

    videoPlayFuture = videoPlayerController?.initialize().then((_){
      // 视频初始化完成后
      // 调用播放
      setState(() {
        videoPlayerController?.play();
      });

    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    videoPlayerController!.dispose();
  }
  // 创建视频播放控制器
  @override
  Widget build(BuildContext context) {
    return Stack(
     children: [
        // 播放视频
      buildVideoWidget(),
      // 控制播放视频按钮
      buildControllWidget(),
      // 底部区域的视频介绍
      buildBottomFlagWidget(),
      // 右侧的用户信息按钮区域
      buildRightUserWidget(),
     ],
    );
    
  }
  // 播放视频
  buildVideoWidget(){
   return FutureBuilder(
     future: videoPlayFuture,
     builder: (context, value) {
       if(value.connectionState == ConnectionState.done){
         // 点击事件
         return InkWell(
           onTap: (){
             if(videoPlayerController!.value.isInitialized){
               // 视频已经初始化
               if(videoPlayerController!.value.isPlaying){
                 // 正在播放 --- 暂停
                 videoPlayerController!.pause();
               }else{
                 // 暂停 -- 播放
                 videoPlayerController!.play();
               }
               setState(() {
                 
               });
             }else{
               //未被初始化
               videoPlayerController!.initialize().then((_) {
                 videoPlayerController!.play();
                 setState(() {
                   
                 });
                 
               });
             }
           },
           child: Center(
             child: AspectRatio(
               aspectRatio: videoPlayerController!.value.aspectRatio,
               // 播放视频组件
               child: VideoPlayer(videoPlayerController!),
             ),
           ),

         );
       }else{
         return Container(
           alignment: Alignment.center,
           child: CircularProgressIndicator(),
         );
       }
      
   });
  }
  // 控制播放视频按钮
  buildControllWidget(){
    Widget itemWidget = Container();

    // 当前视频暂停时显示按钮
    if(videoPlayerController!.value.isInitialized && !videoPlayerController!.value.isPlaying){
      itemWidget = InkWell(
        onTap:(){
           if(videoPlayerController!.value.isInitialized && !videoPlayerController!.value.isPlaying){
             setState(() {
               videoPlayerController!.play();
             });
           }
        },
        child: Container(
        height: 44,
        width: 44,
        decoration: BoxDecoration(
          color: Colors.white60,
          borderRadius: BorderRadius.all(Radius.circular(22))
        ),
        child: Icon(Icons.play_arrow),
      )
      );
    }

    return Align(
      alignment: Alignment(0,0),
      child: itemWidget,
    );
  }

  buildBottomFlagWidget(){
    return Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      child: Container(
        height: 180,
        padding: EdgeInsets.only(top: 20,left: 16,right: 16,bottom: 16),
        color:Color(0x60ffffff),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("@灌篮高手",style: TextStyle(color: Colors.white,fontSize: 17,fontWeight: FontWeight.w500),),
            SizedBox(height: 14,),
            Text("三十年河东,三十年河西,樱木花道",style: TextStyle(fontSize: 16,color: Colors.white,fontWeight: FontWeight.normal),)
          ],
        ),
      ),
    );
  }
  buildRightUserWidget(){
    return Align(
      alignment:Alignment(1, 0.4),
      child: Container(
        width: 60,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment:CrossAxisAlignment.center,
          children: [
            // 用户信息
            buildUserItem(),
            // 喜欢
            buildLikeWidget(assetImage: widget.videoModel.isLike?"assets/hear.png":"assets/unhear.png",msgCount: 223,callBack: (){}),
            // 评论
            buildLikeWidget(
              assetImage: "assets/pinglun.png",
              msgCount: 223,callBack: (){
                showBottomFunction(1);
              }),
            //转发
             buildLikeWidget(
              assetImage: "assets/zhuangfa.png",
              msgCount: 223,callBack: (){
                showBottomFunction(2);
              }),
          ],
        ),
      ),
    );

  }
  buildUserItem(){
    return Container(
      width: 60,
      height: 60,
      child: Stack(
        children: [
          Align(
            alignment: Alignment(0, 0),
            child: ClipOval(
              child: Container(
                width: 44,
                height: 44,
                color: Colors.grey,
                child:CachedNetworkImage(
                  imageUrl: widget.videoModel.videoImage,
                  placeholder: (context,url) => CircularProgressIndicator(),
                ) ,
              ),
            ),
          ),
          widget.videoModel.isAttention?Container():Align(
            alignment: Alignment(0, 1),
            child: Container(
              width: 18,
              height: 18,
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.all(Radius.circular(9))
              ),
              child: Text("+",style: TextStyle(fontSize: 16,color: Colors.white),),
            ),
          )
        ],
      ),
    );
  }
  buildLikeWidget({String? assetImage,int? msgCount,callBack}){
    return InkWell(
      onTap: callBack,
      child: Container(
        margin: EdgeInsets.only(top: 20),
        child: Column(
          mainAxisSize:MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Image.asset(assetImage!,width: 33,height: 33,),
            SizedBox(height: 4,),
            Text("$msgCount",style: TextStyle(color: Colors.white,fontSize: 16),)
          ],
        ),
      ),
    );
  }

 void showBottomFunction(int i){
    showModalBottomSheet(context: context, builder: (BuildContext context){
        if(i ==1){
          return commentItemFunction();
        }else{
          return shareItemFunction();
        }
    });
 }
 // 评论
 Widget commentItemFunction(){
   return Container(
     width: 390,
     color: Colors.white,
     child: Column(
       children: [
         SizedBox(height: 12,),
         Stack(
           children: [
             Align(
               alignment: Alignment(0, 0),
               child: Text("评论区",style: TextStyle(color: Colors.black,fontSize: 16),),
             ),
              Align(
               alignment: Alignment(1, 0),
               child:InkWell(
                 onTap: (){
                  Navigator.pop(context);
                 },
                 child: Padding(padding: EdgeInsets.all(4),
                  child: Icon(Icons.clear,size: 18,),
                 ),
               )
             ),
           ],
         ),
         SizedBox(height:12),
         Expanded(
           child: Container(
             child: ListView.builder(
               itemCount: 100,
               itemBuilder: ((context, index) {
               return buildCommentItemWidget();
             })),
           ),
           )

       ],
     ),
   );
 }
 List<String> nameItems = <String>["微信","朋友圈","QQ","微博","链接","QQ","微博","链接"];
 List<String> urlitems = <String>[
  "assets/weixin.png",
  "assets/friend.png",
  "assets/qq.png",
  "assets/weibo.png",
  "assets/net.png",
  "assets/qq.png",
  "assets/weibo.png",
  "assets/net.png",
 ];

 Widget shareItemFunction(){
   return Container(
     height: 260,
     padding: EdgeInsets.only(top: 8),
     color: Colors.white,
     child: Column(
       children: [
         Padding(padding: EdgeInsets.only(top: 12),
          child: Container(
            height: 190,
            child:GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                mainAxisSpacing: 5.0,
                childAspectRatio: 1.0,
                ), 
              itemBuilder: (BuildContext context,int index){
                return Column(
                  children: [
                    Padding(padding: EdgeInsets.only(left: 6,right: 6),
                      child: Image.asset(
                        urlitems[index],
                        width: 40,
                        height: 40,
                      ),
                    ),
                    Text(nameItems[index])
                  ],

                );
              })
          ),
         ),
         Container(height: 1,color: Colors.grey,),
         InkWell(
           onTap: (){
             Navigator.pop(context);
           },
           child: Container(
             height: 44,
             alignment:Alignment.center,
             child: Text("取消"),
           ),
         )
       ],
     ),
   );
 }

 Widget buildCommentItemWidget(){
   return Container(
     margin: EdgeInsets.only(top: 20),
     
     child: Row(
       mainAxisAlignment: MainAxisAlignment.start,
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Padding(padding: EdgeInsets.only(left: 12,right: 12),
          child: Image.asset("assets/hear.png",width: 33,height: 33,),
         
         ),
         Expanded(child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisSize: MainAxisSize.min,
           children: [
             Text("灌篮高手",style: TextStyle(fontSize: 14,color: Colors.grey),),
             SizedBox(height:4),
             Text("灌篮高手",style: TextStyle(fontSize: 16,color: Colors.black),),
             Container(
               margin: EdgeInsets.only(top: 6),
               padding: EdgeInsets.only(left: 6,right: 6),
               decoration: BoxDecoration(
                 color: Colors.grey[400],
                 borderRadius: BorderRadius.all(Radius.circular(3)),
               ),
               child: Text(
                 "6小时前",
                 style: TextStyle(
                   fontSize: 10
                 ),
               ),
             )
           ],
         ))
       ],
     ),
   );
 }
}